<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Antd</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.21.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-icons/5.0.1/index.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.4.2/antd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
      * {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      }
      html {
        overflow: hidden;
      }
      .product {
        background-color: #fff;
        height: 750px;
        border: 1px solid #d8d8d8;
        margin: 10px auto;
        width: 375px;
        position: relative;
      }
      .product-header {
        padding: 8.5px 0px 8.5px 8.5px;
      }
      .product-header__span {
        font-size: 0.3rem;
        color: #555;
      }
      .product-birth {
        padding: 15px;
      }
      .product-birth__span {
        color: #000000;
        flex: 1;
        font-size: 0.3rem;
      }
      .product-birth__btn {
        width: 125px;
        height: 32.5px;
        background-size: 16px 15.5px;
        background-repeat: no-repeat;
        background-position: 100%;
        color: #fff;
        border-radius: 30px;
        background-color: #ff8350;
        border: 1px solid #ff8350;
        opacity: 0.8;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.265rem;
      }
      .product-box {
        width: 100%;
        background-size: 100% 100%;
        padding: 12px 18px;
        height: 175px;
      }
      .product-box__box {
        margin-left: -8px;
        margin-top: 10px;
        height: 50px;
        align-self: flex-start;
        width: 100%;
      }
      .product-box__img {
        height: 30px;
        width: 129px;
      }
      .product-box__span {
        white-space: nowrap;
        height: 20px;
        font-size: 12px;
        color: #fff;
        margin-bottom: 9.5px;
      }
      .product-bar {
        border-bottom: 1px solid #e5e5e5;
        border-top: 1px solid #e5e5e5;
        height: 56px;
      }
      .product-bar__title {
        flex: 1;
        color: #afafaf;
        font-size: 12px;
        justify-content: center;
      }
      .product-details {
        padding: 10px;
        width: 100%;
        border-radius: 5px;
        overflow: hidden;
      }
      .product-details__header-bar {
        height: 48px;
        background-color: #fb834f;
        font-size: 12px;
      }
      .product-details__content {
        padding-top: 15px;
        font-size: 12px;
        color: #464646;
        border-left: 1px solid #d8d8d8;
        border-right: 1px solid #d8d8d8;
        border-bottom: 1px dashed #d8d8d8;
      }
      .product-details__content--item {
        padding: 5px 10px;
        height: 28px;
      }
      .product-details__content--item:last-child {
        border-bottom: 1px dashed #d8d8d8;
      }
      .product-details__content--bottom {
        font-size: 12px;
        color: #464646;
        padding: 5px 10px;
        height: 28px;
        border-left: 1px solid #d8d8d8;
        border-right: 1px solid #d8d8d8;
      }
      .product-footer {
        width: 375px;
        position: absolute;
        background-color: #f7f7fa;
      }
      .product-pay {
        height: 49px;
        color: #c82727;
        padding: 0 12.5px;
      }
      .product-pay__unit {
        font-weight: 500;
        font-size: 12px;
      }
      .product-pay__btn {
        border: 1px solid #ff8350;
        box-shadow: 0 5px 15px 1px #ff8350;
        background-color: #ff8350;
        border-radius: 15px;
        font-size: 12px;
        line-height: 14px;
        padding: 6px 28px;
        width: 110px;
        white-space: nowrap;
        color: white;
      }
      .left {
        border-top-left-radius: 5px;
        color: #fff;
        position: relative;
      }
      .support-detail {
        height: 300px;
        overflow: auto;
      }
      .support-detail img {
        width: 100%;
      }
      .support-tabs .tab-header {
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        height: 56px;
        justify-content: space-between;
      }
      .support-tabs .tab-header__active {
        color: #fb834f;
      }
      .product-details .tab-header {
        flex: 1;
        height: 100%;
        /* border-bottom: 1px solid #d4d4d4; */
        border-right: 1px solid #d4d4d4;
      }
      .product-details .tab-header__item {
        font-size: 15px;
        color: #595959;
        display: flex;
        align-items: center;
        height: 48px;
        border-left: 1px solid #d8d8d8;
      }
      .product-details .tab-header__active {
        color: white;
        flex: 1;
        background-color: #fb834f;
        position: relative;
      }
      .product-details .tab-header__active:after {
        border-bottom: 4px solid #fff;
        border-top: 0;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0;
      }
      .tab-header__item {
        justify-content: center;
        display: flex;
        color: #afafaf;
        font-size: 15px;
      }
      .support-tabs .ant-tabs-tab {
        color: #afafaf;
      }
      .support-tabs .ant-tabs-ink-bar {
        display: none;
      }
      .support-tabs .ant-tabs-nav {
        border-top: 1px solid #e5e5e5;
      }
      .support-tabs .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
        color: #fb834f;
      }
      .product-details__tabs .ant-tabs-tab {
        border: 1px solid;
      }
      .product-details__tabs .ant-tabs-tab-active {
        position: relative;
        background: #fb834f;
        border: none;
      }
      .product-details__tabs .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
        color: white;
      }
      .product-details__tabs .ant-tabs-tab-active:after {
        border-bottom: 4px solid #fff;
        border-top: 0;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0;
      }
      .product-details .ant-tabs .ant-tabs-tab + .ant-tabs-tab {
        margin: 0px;
      }
      .product-details .ant-tabs {
        border-left: 1px solid rgb(216, 216, 216);
        border-right: 1px solid rgb(216, 216, 216);
      }
      .product-details__sublabel {
        width: 100%;
        color: #a1a1a1;
        font-size: 0.2062rem;
        padding: 0 10px;
      }
      :where(.css-1me4733).ant-tabs .ant-tabs-tab:hover {
        color: #fb834f;
      }
      .picker-content__item {
        position: relative;
        color: #a2a2a2;
        overflow: auto;
        height: 272px;
      }
      .picker-content__item::-webkit-scrollbar {
        display: none;
      }
      .picker-content__item--label {
        text-align: center;
        font-size: 16px;
        height: 34px;
        line-height: 34px;
        width: 100%;
      }
      .picker-content__item--label__active {
        font-weight: 600;
        color: #263238;
        font-size: 14px;
      }
      .scroll-mask {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        margin: 0 auto;
        width: 100%;
        z-index: 3;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
          linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
        background-position: top, bottom;
        background-size: 100% 102px;
        background-repeat: no-repeat;
      }
      .scroll-indicator {
        width: 100%;
        height: 34px;
        position: absolute;
        left: 0;
        top: 102px;
        z-index: 3;
        background-image: linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent),
          linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);
        background-position: top, bottom;
        background-size: 100% 1px;
        background-repeat: no-repeat;
      }
      .security {
        font-size: 13px;
        padding: 10px;
      }
      .security-img {
        width: 13px;
        height: 13px;
        margin-right: 4px;
      }
      .security-span {
        min-width: 70px;
        color: #999;
        white-space: nowrap;
      }
      .security-option {
        white-space: nowrap;
      }
      .security-title {
        color: #fb834f;
        white-space: nowrap;
        margin: 0 3px;
      }
      .security-line {
        font-size: 13px;
        color: #999;
      }
      .security-popup::-webkit-scrollbar {
        display: none;
      }
      .security-popup__content .ant-tabs-tab {
        padding: 12px 0px 0px 12px !important;
      }
      .ant-tabs .ant-tabs-tab {
        justify-content: center;
      }
      .ant-tabs .ant-tabs-tab .ant-tabs-nav-operations {
        display: none;
      }
      .ant-tabs .ant-tabs-ink-bar {
        background: rgb(255, 131, 80);
      }
      .security-popup__content .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
        margin-bottom: 10px;
        color: #ff8350;
      }
      .security-popup__content .ant-tabs .ant-tabs-tab-btn {
        color: #666;
        margin-bottom: 10px;
      }
      .security-popup__content--inner {
        padding: 0px 12px;
        overflow: auto;
        height: 420px;
      }
      .security-popup__content--btn {
        width: 325px;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        position: fixed;
        background: #ff8350;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        line-height: 30px;
        border: 1px solid #ff8350;
      }
      .ant-drawer .ant-drawer-content {
        border-top-left-radius: 7px;
        background-color: #fff;
        border-top-right-radius: 7px;
      }
      p {
        margin: 0px !important;
      }
      .security-popup__content--inner::-webkit-scrollbar {
        display: none;
      }
      body {
        margin: 0px;
      }
      .flex {
        display: flex;
      }
      .column {
        flex-direction: column;
      }
      .between {
        justify-content: space-between;
      }
      .center {
        align-items: center;
      }
      .items-end {
        align-items: end;
      }
      .items-center {
        justify-content: center;
      }
      .mb-10 {
        margin-bottom: 10px;
      }
      .mr-5 {
        margin-right: 5px;
      }
      .mt-20 {
        margin-top: 20px;
      }
      .mr-10 {
        margin-right: 10px;
      }
      .pd-5 {
        padding: 5px;
      }
      .pt-10 {
        padding-top: 10px;
      }
      .overflow {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .equal {
        flex: 1;
      }
      .active {
        color: #fb834f;
      }
      .agent-header {
        font-size: 12px;
        padding: 0px 15px;
        color: #ff8350;
        background: #f8f8f8;
      }
      .agent-header__span {
        width: 345px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .agent-header__btn {
        box-shadow: 0 5px 15px 1px #ff8350;
        border: 1px solid #ff8350;
        white-space: nowrap;
        border-radius: 15px;
        padding: 4px 10px;
        color: white;
        background: #ff8350;
      }
      .agent-input {
        margin: 10px 10px 10px 6px;
      }
      .ant-input-affix-wrapper {
        border-radius: 20px;
        background-color: #f6f6f6;
        padding: 10px 10px;
        border: transparent;
      }
      .ant-input {
        color: rgb(163 148 148);
        background-color: #f6f6f6;
        margin-left: 10px;
      }
      .agent-picker {
        background-color: #f6f6f6;
        padding: 0px 10px;
        font-size: 12px;
        color: #a1a1a1;
        height: 40px;
        align-items: center;
      }
      .agent-list {
        width: 100%;
        height: 428px;
        overflow-y: scroll;
      }
      .agent-list::-webkit-scrollbar {
        display: none;
      }
      .agent-item {
        height: 95px;
        padding: 15px;
        border-bottom: 1px solid #e5e5e5;
      }
      .agent-item__active {
        background: rgb(255, 245, 218);
      }
      .cascader-item {
        height: 40px;
        padding: 0px 10px;
        color: #a1a1a1;
        font-size: 12px;
      }
      .picker {
        width: 375px;
        background: #fff;
      }
      .picker-header {
        padding: 0 15px;
        height: 44px;
        color: #fb8352;
        font-size: 16px;
        border-bottom: 1px solid #e5e5e5;
      }
      .enter-header {
        width: 100%;
        margin: auto;
        height: 50px;
        text-align: center;
        border: none;
        border-bottom: 1px solid #d4cdcd;
        background: #fff;
        font-size: 16px;
      }
      .enter-content {
        width: 100%;
        font-size: 12px;
        line-height: 12px;
        padding: 15px 0px;
        background-color: rgb(255, 131, 80) !important;
        border-radius: 5px;
        color: white;
        border: 1px solid rgb(255, 131, 80);
      }
      .enter-inner {
        padding-bottom: 30px;
        height: 237px;
        font-size: 12px;
        color: rgb(132, 132, 132);
        font-weight: 500;
        text-align: left;
        white-space: pre-wrap;
      }
      .enter .ant-drawer .ant-drawer-content {
        border-radius: 7px;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin-bottom: 8px;
      }
      h6 {
        margin-top: 0;
        font-weight: 500;
        font-family: inherit;
        color: inherit;
        font-size: 13px;
        padding: 0px 5px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/babel">
    const { antd } = window
    const { Drawer, Tabs, Input, TimePicker } = antd
    const { RightOutlined, CloseOutlined, SearchOutlined, DownOutlined } = icons
    const { useEffect, useState, useRef, useCallback, memo, useMemo, Fragment } = React

    const productInit = {
      skuAttributes: [],
      items: [],
      coverages: []
    }

    function App() {
      const showPopup = false
      const show = ''

      const initList = []

      const [productDetail, setProductDetail] = useState(productInit)
      const [addressStr, setAddressStr] = useState('')
      const [birthDay, setBirthDay] = useState('')
      const [money, setMoney] = useState()
      const [age, setAge] = useState()
      const [insurancePeriod, setInsurancePeriod] = useState()
      const [coverageList, setCoverageList] = useState(initList)
      const [feelCoverageList, setFeelCoverageList] = useState(initList)
      const [careList, setCareList] = useState(initList)
      const [agentList, setAgentList] = useState(initList)
      const [supportDefault, setSupportDefault] = useState('1')
      const [detailDefault, setDetailDefault] = useState('1')
      const [province, setProvince] = useState()
      const [provinceStr, setProvinceStr] = useState()
      const [city, setCity] = useState()
      const [cityStr, setCityStr] = useState()
      const [zone, setZone] = useState()
      const [marketList, setMarketList] = useState([])
      const [zoneList, setZoneList] = useState([])
      const [context, setContext] = useState(false)
      const [isSelect, setIsSelect] = useState(false)
      const [isMarket, setIsMarket] = useState()
      const [showPicker, setShowPicker] = useState(false)
      const [detailPopup, setDetailPopup] = useState(false)
      const [imgSrc, setImgSrc] = useState()
      const [itemsDefault, setItemsDefault] = useState('1')
      const [businessNo, setBusinessNo] = useState()
      const [policyNo, setPolicyNo] = useState()
      const [step, setStep] = useState(4)
      const [enterPopup, setEnterPopup] = useState(false)
      const [productId, setProductId] = useState()

      // const address = 'https://dev-img01.oss-cn-hangzhou.aliyuncs.com/Xcx/protection/address_logo.png'
      const address = `${window.location.origin}/static/img/cdc/tabbar/address_logo.png`
      // const logo = 'https://img.ins-box.com/image/brand/202210/WechatIMG27.png'
      let logo = `${window.location.origin}/static/img/cdc/lifeInsurance.png`

      const preLogo = `${window.location.origin}/static/img/cdc/lifeInsurance.png`
      // const child = 'https://dev-img.ins-box.com/Xcx/home/product.png'
      const child = `${window.location.origin}/static/img/cdc/tabbar//product.png`

      const iframeRef = useRef()
      const imageList = useRef()

      const itemsShow = useCallback(() => calcItemsShow(productDetail, birthDay), [productDetail, birthDay])

      // const calcInsureChildren = useCallback(() => {
      //   return calc()
      // }, [productDetail])

      const yearList = useMemo(() => {
        if (birthDay) {
          const birthList = calcBirth(birthDay)
          let yearList = []
          if (birthList[0]) {
            for (let i = birthList[0] - 3; i <= birthList[0]; i++) {
              yearList.push(i)
            }
            yearList.push(Number(birthList[0]) + 1)
            yearList.push(Number(birthList[0]) + 2)
          }
          return yearList
        }
      }, [birthDay])

      const monthList = useMemo(() => {
        if (birthDay) {
          const birthList = calcBirth(birthDay)
          let monthList = []
          if (birthList[1]) {
            for (let i = birthList[1] - 3; i <= birthList[1]; i++) {
              if (Number(i) > 0) {
                monthList.push(i)
              } else {
                monthList.push('')
              }
            }
            if (birthList[1] <= 10) {
              monthList.push(Number(birthList[1]) + 1)
              monthList.push(Number(birthList[1]) + 2)
            }
          }
          return monthList
        }
      }, [birthDay])

      const dayList = useMemo(() => {
        if (birthDay) {
          const birthList = calcBirth(birthDay)
          let dayList = []

          // function getDaysInMonth(year, month) {
          //   return new Date(year, month, 0).getDate()
          // }

          for (let i = birthList[2] - 3; i <= birthList[2]; i++) {
            if (i > 0) {
              dayList.push({ label: i })
            }
          }
          if (birthList[2] <= 28) {
            dayList.push({ label: Number(birthList[2]) + 1 })
            dayList.push({ label: Number(birthList[2]) + 2 })
          }

          return dayList
        }
      }, [birthDay])

      const curYear = useMemo(() => {
        if (birthDay) {
          const birthList = calcBirth(birthDay)
          return birthList[0]
        }
      }, [birthDay])

      const curMonth = useMemo(() => {
        if (birthDay) {
          const birthList = calcBirth(birthDay)
          return birthList[1]
        }
      }, [birthDay])

      const curDay = useMemo(() => {
        if (birthDay) {
          const birthList = calcBirth(birthDay)
          return birthList[2]
        }
      }, [birthDay])

      const filterCriteria = (proposalDate, productId) => {
        const proposal = new Date(proposalDate)
        const huBei = new Date('2021-3-20')
        const guiZhou = new Date('2022-12-24')
        // 2021年3月20日换产品方案和保险条款，原产品ID：6110045、新产品ID：6110047
        if (proposal < huBei && productId === 6110045) {
          return { productId: 6110047 }
        }
        // 2022年12月24日 换人保logo/加中介logo，新产品ID：6110074、原产品ID：6110041（保险方案无变化）
        else if (proposal < guiZhou && productId === 6110041) {
          return { productId: 6110074, intermediary: true, lifeInsurance: true }
        }
        // 2022年12月24日 换人保logo
        else if (proposal < guiZhou) {
          return { lifeInsurance: true }
        } else {
          return null
        }
      }

      const getNode = (tree, districtCode) => {
        let node
        for (let i = 0; i < tree.length; i++) {
          if (tree[i]['districtCode'] === districtCode) {
            node = tree[i]
          }
          if (tree[i].children && tree[i].children.length) {
            const children = getNode(tree[i].children, districtCode)
            if (children) {
              node = children
            }
          }
        }
        return node
      }

      const getDistrict = districtCode => {
        const province = '0000'.padStart(6, districtCode)
        const city = '00'.padStart(6, districtCode)
        return [province, city]
      }

      // 根据区域 获取省市 代码
      function getDistrictArray(districtCode, china) {
        const district = getDistrict(districtCode)
        const province = getNode(china, district[0])
        const city = getNode(china, district[1])
        const zone = getNode(china, districtCode)
        return [province, city, zone]
      }

      function rangeJudge(range, age) {
        var leftIntervalSymbol = range.substr(0, 1)
        var rightIntervalSymbol = range.substr(range.length - 1, 1)
        var min = parseFloat(range.substr(1, range.length - 2).split(',')[0])
        var max = parseFloat(range.substr(1, range.length - 2).split(',')[1])
        return (leftIntervalSymbol === '(' ? age > min : age >= min) && (rightIntervalSymbol === ')' ? age < max : age <= max)
      }

      function getAge(beginStr) {
        var birthDate = new Date(beginStr)
        var now = new Date()
        var age = now.getFullYear() - birthDate.getFullYear()
        var ageNowYear = new Date()
        ageNowYear.setFullYear(now.getFullYear())
        ageNowYear.setMonth(now.getMonth())
        ageNowYear.setDate(now.getDate() + 1)
        var birthNowYear = new Date()
        birthNowYear.setFullYear(now.getFullYear())
        birthNowYear.setMonth(birthDate.getMonth())
        birthNowYear.setDate(birthDate.getDate())
        age = now.getFullYear() - birthDate.getFullYear() + (ageNowYear.valueOf() - birthNowYear.valueOf()) / (365 * 24 * 60 * 60 * 1000)
        age = age.toFixed(3)
        return age
      }

      // 计算年龄范围
      const calcAgeRange = items => {
        let arr = []
        let arr1 = []
        for (let i = 0; i < items.length; i++) {
          arr.push(items[i].propertyValue2[items[i].propertyValue2.length - 2])
          arr1.push(items[i].propertyValue2[1])
        }
        return `${Math.min.apply(Math, arr1)}-${Math.max.apply(Math, arr)}`
      }

      function calcItemsShow(productDetail) {
        let details = productDetail

        details.itemsShow = details?.skuAttributes?.filter(item => item.attributeName === 'plan')
        let minAge = null
        let maxAge = null

        for (let [index, item] of details?.itemsShow?.entries()) {
          for (let [indexChild, itemChild] of details?.items?.entries()) {
            if (rangeJudge(itemChild.propertyValue2, getAge(birthDay)) && item.attributeValue === itemChild.propertyValue1) {
              itemChild.maxAge = maxAge
              itemChild.minAge = minAge
              details.itemsShow[index].item = itemChild
              break
            }
          }
        }

        let coveragesMap = (function () {
          let res = {}
          details.coverages.forEach(coverage => {
            res[coverage.coverageId] = coverage
          })
          return res
        })()

        for (let {
          item: { coverages }
        } of details.itemsShow) {
          for (let coverage of coverages) {
            if (coveragesMap[coverage.coverageId]) {
              coverage = Object.assign(coverage, coveragesMap[coverage.coverageId])
            }
          }
        }

        if (details.itemsShow && details.itemsShow.length !== 0) {
          const list = details.itemsShow.filter(item => item.attributeValue === '无忧保障')[0]
          const coverageList = list.item.coverages
          setMoney(list.item.price)
          setCoverageList([...initList, ...coverageList])
          const feelCoverage = details.itemsShow.filter(item => item.attributeValue === '安心保障')
          if (feelCoverage && feelCoverage.length !== 0) {
            const feelCoverageList = feelCoverage[0].item.coverages
            setFeelCoverageList([...initList, ...feelCoverageList])
          }
          const care = details.itemsShow.filter(item => item.attributeValue === '呵护保障')
          if (care && care.length !== 0) {
            const careList = care[0].item.coverages
            setCareList([...initList, ...careList])
          }
        }

        return details.itemsShow
      }

      async function calc() {
        let result
        let IMG
        async function calcPDF() {
          const isEmpty = arr => {
            for (let i = 0; i < arr.length; i++) {
              if (!arr[i]) return true
            }
            return false
          }

          const imageArr = []
          pdfjsLib.workerSrc = 'pdf.worker.js'
          let loadingTask = pdfjsLib.getDocument({
            url: productDetail?.clause?.clauseContent,
            disableRange: true
          })

          loadingTask.promise.then(pdfDoc => {
            const totalPage = pdfDoc.numPages
            for (let i = 1; i <= totalPage; i++) {
              pdfDoc.getPage(i).then(page => {
                const scale = window.devicePixelRatio | 1
                // pdf原本的宽高
                const viewPort = page.getViewport({ scale: 1 })
                // 创建canvas
                const canvas = document.createElement('canvas')
                const context = canvas.getContext('2d')
                canvas.width = viewPort.width
                canvas.height = viewPort.height
                // canvas.width = Math.floor(viewPort.width * scale)
                // canvas.height = Math.floor(viewPort.height * scale)
                // 创建渲染任务
                let renderContext = {
                  canvasContext: context,
                  viewport: viewPort
                }
                const renderTask = page.render(renderContext)
                renderTask.promise.then(() => {
                  let imgUrl = canvas.toDataURL('image/jpeg')
                  if (imgUrl) {
                    imageArr[i - 1] = imgUrl
                  }
                  if (imageArr.length == totalPage && !isEmpty(imageArr)) {
                    const newCanvas = document.createElement('canvas')
                    const newContext = newCanvas?.getContext('2d')
                    if (newCanvas) newCanvas.width = viewPort.width
                    if (newCanvas) newCanvas.height = viewPort.height * totalPage
                    let count = 0
                    for (let j = 0; j < imageArr.length; j++) {
                      const img = new Image()
                      img.src = imageArr[j]
                      img.width = viewPort.width
                      img.height = viewPort.height
                      img.onload = () => {
                        newContext?.drawImage(img, 0, viewPort.height * j)
                        count++
                        if (count === totalPage) {
                          document.querySelector('.ant-tabs-nav-operations')?.remove()
                          setImgSrc(newCanvas?.toDataURL())
                        }
                      }
                    }
                  }
                })
              })
            }
          })
        }
        if (productDetail?.clause?.clauseContent) {
          await calcPDF()
          // result =
          // return result
        }
      }

      function calcBirth(birthDate) {
        if (birthDate) {
          const arr = birthDate.split('-')
          const year = arr[0]
          let month = arr[1]
          if (month < 10) {
            month = month.replace('0', '')
          }
          let day = arr[2]
          if (day < 10) {
            day = day.replace('0', '')
          }
          return [year, month, day]
        }
      }

      const handleLoaded = () => {
        return new Promise((resolve, reject) => {
          html2canvas(document.querySelector('.product'))
            .then(canvas => {
              resolve(canvas.toDataURL())
              // canvas 是截图后生成的 Canvas 对象
            })
            .catch(err => {
              console.error(err)
            })
        })
      }

      const postSrcMsg = () => {
        clearTimeout(timer)
        let timer = setTimeout(async () => {
          let src = await handleLoaded()
          let msg = {
            src: src
          }
          parent.postMessage(msg, '*')
        }, 1000)
      }

      useEffect(() => {
        const messageHandle = event => {
          if (!businessNo && event.data.businessNo) {
            setBusinessNo(event.data.businessNo)
          } else if (!policyNo && event.data.policyNo) {
            setPolicyNo(event.data.policyNo)
          }
          if (event.data.step) {
            setStep(event.data.step)
          }
        }
        const loadedHandle = event => {
          const data = {
            loaded: true
          }
          clearTimeout(timer)
          let timer = setTimeout(async () => {
            let src = await handleLoaded()
            let msg = { src: src }
            parent.postMessage(msg, '*')
          }, 1000)
          parent.postMessage(data, '*')
        }
        window.addEventListener('load', loadedHandle)
        window.addEventListener('message', messageHandle)
        const init = async () => {
          // if (birthDay !== undefined) {
          let {
            data: {
              data: { productModel, address, distanceSortAgent, insurancePeriod, birthDate, planName, proposalDate }
            }
          } = await axios.get(
            `https://cdc.testsaas.bodajianyu.com/api/policy/getPolicyMsg${businessNo ? '?businessNo=' + businessNo : '?policyNo=' + policyNo}`
          )

          setProductDetail(productModel)

          let filterResult = filterCriteria(proposalDate, productModel.product.productId)
          if (!filterResult) return
          // 换产品id
          if (filterResult.productId && !filterResult.lifeInsurance && !filterResult.intermediary) {
            let {
              data: { data }
            } = await axios.get(`http://cdc.testsaas.bodajianyu.com/api/product/${filterResult.productId}?productId=${filterResult.productId}`)
            setProductDetail(data)
          }
          // 换人保logo及加中介logo
          else if (filterResult.productId && filterResult.lifeInsurance && filterResult.intermediary) {
            let {
              data: { data }
            } = await axios.get(`http://cdc.testsaas.bodajianyu.com/api/product/${filterResult.productId}?productId=${filterResult.productId}`)
            setProductDetail(data)
            logo = `${window.location.origin}/static/img/cdc/tabbar/WechatIMG27.png`
          }
          // 换人保logo
          else if (filterResult.lifeInsurance) {
            logo = `${window.location.origin}/static/img/cdc/tabbar/WechatIMG27.png`
          }

          let { data } = await axios.get('https://cdc.testsaas.bodajianyu.com/static/json/china_address_v3.json')

          setBirthDay(proposalDate)

          if (distanceSortAgent[0]?.bussinessArea) {
            let res = getDistrictArray(distanceSortAgent[0]?.bussinessArea, data)
            // if (context) {
            setMarketList(res[0].children)
            setZoneList(res[1].children)
            // isSelect为true isMarket为true时显示市 isSelect为true isMarket为false时显示区县 isSelect为false时 只显示代理列表
            setIsSelect(false)
            setIsMarket(false)
            setProvince(res[0].districtCode)
            setProvinceStr(res[0].districtName)
            setCity(res[1].districtCode)
            setCityStr(res[1].districtName)
            const zone = getNode(data, distanceSortAgent[0].bussinessArea)
            setZone(zone.districtName)
            setAgentList([...initList, ...distanceSortAgent])
            // let res = getDistrictArray(distanceSortAgent[0]?.bussinessArea)
            let str = `${res[0].districtName}${res[1].districtName}${res[2].districtName}${address}`
            setAddressStr(str)
            // }
          }

          if (!detailPopup && !context && !showPicker) {
            let range = calcAgeRange(productModel?.items)
            setAge(range)
            setInsurancePeriod(insurancePeriod)
          }

          if (businessNo || policyNo) {
            switch (step) {
              case 2:
                setEnterPopup(true)
                postSrcMsg()
                break
              case 3:
                setEnterPopup(false)
                setSupportDefault('1')
                postSrcMsg()
                break
              case 4:
                setSupportDefault(planName === '呵护保障' ? '2' : planName === '安心保障' ? '3' : '1')
                setDetailPopup(false)
                postSrcMsg()
                break
              case 5:
                setDetailPopup(true)
                setItemsDefault('1')
                postSrcMsg()
                break
              case 6:
                setItemsDefault('2')
                postSrcMsg()
                const list = productModel?.items.filter(item => {
                  return item.itemName === planName && item.insurancePeriod === insurancePeriod.substring(0, 1)
                })
                setMoney(list[0].price)
                break
              case 7:
                setItemsDefault('3')
                setDetailPopup(true)
                setContext(false)
                postSrcMsg()
                break
              case 8:
                setDetailPopup(false)
                setContext(true)
                setShowPicker(false)
                postSrcMsg()
                break
              case 9:
                setContext(false)
                setShowPicker(true)
                postSrcMsg()
                setBirthDay(birthDate)
                break
              case 10:
                setShowPicker(false)
                postSrcMsg()
                break
            }
          }
        }

        if (businessNo || policyNo) init()

        return () => {
          // setMoney(null)
          // setInsurancePeriod(null)
          // setAge(null)
          setAddressStr(null)
          setProductDetail(null)
          setBirthDay(null)
          // setEnterPopup(null)
          // setDetailPopup(null)
          window.removeEventListener('message', messageHandle)
          window.removeEventListener('DOMContentLoaded', loadedHandle)
        }
      }, [businessNo, step, policyNo])

      useEffect(() => {
        if (productDetail && birthDay) {
          itemsShow()
        }
      }, [productDetail, itemsShow, birthDay])

      const visible = true

      function ensureList(list) {
        return (
          <div className='product-details__content'>
            {list.map(({ coverageName, coverageDetails, coverageId, open, viewAmount }) => (
              <React.Fragment key={coverageId}>
                <div className='product-details__content--item flex between'>
                  <div>{coverageName}</div>
                  <div className='flex center'>
                    <span className='mr-10'>{viewAmount}</span>
                    {open ? <DownOutlined /> : <RightOutlined />}
                  </div>
                </div>
                <div className='product-details__sublabel' style={{ display: open ? '' : 'none' }}>
                  {coverageDetails}
                </div>
              </React.Fragment>
            ))}
          </div>
        )
      }

      function Tab({ defaultActiveKey, items }) {
        items = items.filter(item => item !== null)
        const labelList = items.reduce((output, item) => {
          output.push({
            label: item.label,
            key: item.key
          })
          return output
        }, [])
        const childrenList = items.reduce((output, item) => {
          output.push({
            children: item.children,
            key: item.key
          })
          return output
        }, [])
        return (
          <>
            {items ? (
              <div className='tab'>
                <div className='tab-header flex center'>
                  {labelList?.map(({ label, key }) => (
                    <div className={`equal tab-header__item ${key === defaultActiveKey ? 'tab-header__active' : ''}`} key={key}>
                      {label}
                    </div>
                  ))}
                </div>
                <div className='tab-content'>
                  {childrenList?.map(({ children, key }) => (
                    <div key={key}>{key === defaultActiveKey && children}</div>
                  ))}
                </div>
              </div>
            ) : (
              <></>
            )}
          </>
        )
      }

      function Support({ notifyContent, details, coverageList, feelCoverageList, careList, supportDefault, detailDefault, age, insurancePeriod }) {
        // 无忧保障 安心保障
        const supportChildren = (supportDefault, insurancePeriod) => {
          const supportItems = [
            {
              key: '1',
              label: '无忧保障',
              children: ensureList(coverageList)
            },
            feelCoverageList.length !== 0
              ? {
                  key: '2',
                  label: '安心保障',
                  children: ensureList(feelCoverageList)
                }
              : null,
            careList.length !== 0
              ? {
                  key: '3',
                  label: '呵护保障',
                  children: ensureList(careList)
                }
              : null
          ]

          return (
            <div className='product-details'>
              <div className='product-details__tabs'>
                <Tab defaultActiveKey={supportDefault} items={supportItems} />
              </div>
              <div className='product-details__content--bottom flex between pt-10'>
                <span>适用年龄</span>
                <span>{age}周岁</span>
              </div>
              <div className='product-details__content--bottom flex between' style={{ borderBottom: '1px solid #d8d8d8' }}>
                <span>保障期限</span>
                <span>{insurancePeriod}</span>
              </div>
            </div>
          )
        }
        // 产品详情
        const detailChildren = () => {
          return <div dangerouslySetInnerHTML={{ __html: notifyContent }} className='support-detail'></div>
        }

        // 服务详情
        const serverChildren = () => {
          return <div dangerouslySetInnerHTML={{ __html: details }} className='support-detail'></div>
        }

        const detailItems = [
          {
            key: '1',
            label: `保障计划`,
            children: supportChildren(supportDefault, insurancePeriod)
          },
          details?.config
            ? {
                key: details?.config ? '2' : '0',
                label: `产品详情`,
                children: detailChildren()
              }
            : null,
          {
            key: details?.config ? '3' : '2',
            label: `服务详情`,
            children: serverChildren()
          }
        ]

        return (
          <div className='support-tabs'>
            <Tab defaultActiveKey={detailDefault} items={detailItems} />
          </div>
        )
      }

      function shouldUpdate(prevProps, nextProps) {
        return (
          prevProps.feelCoverageList !== nextProps.feelCoverageList ||
          prevProps.careList !== nextProps.careList ||
          prevProps.details.config !== nextProps.details.config
        )
      }
      const SupportPlan = memo(Support, shouldUpdate)

      //平台告知
      function Enter({ details, enterPopup }) {
        return (
          <Drawer
            getContainer={false}
            rootClassName='enter'
            placement='bottom'
            open={enterPopup}
            key='1'
            bodyStyle={{ padding: '0px' }}
            contentWrapperStyle={{ height: '350px', width: '375px', margin: '4.7vh auto' }}
            closable={false}
          >
            <button className='enter-header'>平台告知</button>
            <div dangerouslySetInnerHTML={{ __html: details?.dialogue }} style={{ paddingBottom: '30px' }} className='enter-inner'></div>
            <button className='enter-content'>同意并确认</button>
          </Drawer>
        )
      }

      const EnterPopup = memo(Enter)
      // 代理点
      function Agent({ agentList, provinceStr, province, city, cityStr, zone, marketList, zoneList, context, isSelect, isMarket }) {
        const initList = []

        const active = ''

        const calcDistance = useCallback(
          distance => {
            if (distance === 0) return null
            const D = (distance / 1000).toFixed(2)
            if (D > 10) {
              return '> 10km'
            } else if (D < 10) {
              return `${D} km`
            }
          },
          [agentList]
        )

        const Cascader = ({ isMarket, marketList, zoneList }) => {
          return (
            <>
              {isMarket
                ? marketList?.map(({ districtName }) => {
                    return (
                      <div className='flex between center cascader-item' key={districtName}>
                        {districtName}
                        <RightOutlined />
                      </div>
                    )
                  })
                : zoneList?.map(({ districtName }) => {
                    return (
                      <div className='flex between center cascader-item'>
                        {districtName}
                        <RightOutlined />
                      </div>
                    )
                  })}
            </>
          )
        }

        const CascaderMemo = memo(Cascader)

        return (
          <Drawer
            placement='bottom'
            open={context}
            key='1'
            bodyStyle={{ padding: '0px' }}
            contentWrapperStyle={{ height: '570px', width: '375px', margin: 'auto' }}
            closable={false}
            getContainer={false}
          >
            <div className='agent-header flex center'>
              <div className='agent-header__span'>选择接种点</div>
              <button className='agent-header__btn'>确定</button>
            </div>
            {!isSelect ? (
              <>
                <div className='agent-input'>
                  <Input prefix={<SearchOutlined />} defaultValue='搜索' />
                </div>
                <div class='agent-picker flex between'>
                  <span>{`${provinceStr}${cityStr}`}</span>
                  <div className='flex'>
                    <div style={{ marginRight: '5px', color: '#404040' }}>{`${zone}`}</div>
                    <RightOutlined />
                  </div>
                </div>
                <div class='agent-list'>
                  {agentList.map(({ agentName, address, agentId, distance }) => {
                    return (
                      <>
                        <div className={`${active === agentId ? 'agent-item__active' : ''}  agent-item`} key={agentId}>
                          <div className='flex between mb-10'>
                            <p style={{ fontSize: '14.4px', color: '#404040' }}>{agentName}</p>
                            <p style={{ fontSize: '12.8px', color: '#949494' }}>{calcDistance(distance)}</p>
                          </div>
                          <div style={{ fontSize: '14.4px', color: '#949494' }}>{address}</div>
                        </div>
                      </>
                    )
                  })}
                </div>
              </>
            ) : (
              <CascaderMemo marketList={marketList} zoneList={zoneList} isSelect={isSelect}></CascaderMemo>
            )}
          </Drawer>
        )
      }

      const AgentPopup = memo(Agent)

      // 底部弹窗
      function Security({ notification, content, declareContent, detailPopup, imgSrc, itemsDefault }) {
        const closeBtn = '关闭'
        const contentChildren = () => {
          return (
            <>
              <div className='security-popup__content--inner'>
                <span style={{ color: '#ff8350' }}>投保须知</span>
                <div dangerouslySetInnerHTML={{ __html: content }}></div>
              </div>
              <button className='security-popup__content--btn'>{closeBtn}</button>
            </>
          )
        }

        const declareChildren = () => {
          return (
            <div>
              <div className='security-popup__content--inner'>
                <span style={{ color: '#ff8350' }}>投保声明</span>
                <div dangerouslySetInnerHTML={{ __html: declareContent }}></div>
              </div>
              <button button className='security-popup__content--btn'>
                {closeBtn}
              </button>
            </div>
          )
        }

        const notificationChildren = () => {
          return (
            <>
              <div dangerouslySetInnerHTML={{ __html: notification }} className='security-popup__content--inner'></div>

              <button className='security-popup__content--btn'>{closeBtn}</button>
            </>
          )
        }

        const insureChildren = () => {
          return (
            <div style={{ overflow: 'auto', width: '100%' }}>
              <img width='100%' src={imgSrc} />
            </div>
          )
        }

        const items = [
          {
            key: '1',
            label: `投保须知`,
            children: contentChildren()
          },
          {
            key: '2',
            label: `投保声明`,
            children: declareChildren()
          },
          {
            key: '3',
            label: `责任免除`,
            children: notificationChildren()
          },
          {
            key: '4',
            label: '保险条款',
            children: insureChildren()
          }
        ]

        const checkbox =
          ''

        return (
          <>
            <div className='security flex center'>
              <img src={checkbox} alt='' className='security-img' />
              <span className='security-span'>同意并确认</span>
              <div className='security-option flex center'>
                <span className='security-title'>投保须知</span>
                <p className='security-line'>|</p>
                <span className='security-title'>投保声明</span>
                <p className='security-line'>|</p>
                <span className='security-title'>责任免除</span>
                <p className='security-line'>|</p>
                <span className='security-title'>保险条款</span>
                <p className='security-line'>|</p>
              </div>
            </div>
            <Drawer
              placement='bottom'
              open={detailPopup}
              key='1'
              bodyStyle={{ padding: '0px' }}
              contentWrapperStyle={{ height: '536.25px', width: '375px', margin: 'auto' }}
              closable={false}
              getContainer={false}
            >
              <div className='security-popup'>
                <div className='security-popup__header flex center between' style={{ padding: '10px 12px 0px 12px' }}>
                  <span style={{ fontSize: '16px', marginBottom: '5px' }}>{items.filter(item => item.key === itemsDefault)[0].label}</span>
                  <CloseOutlined style={{ height: '12px', width: '12px', color: 'rgb(46, 45, 45)' }} />
                </div>
                <div className='security-popup__content'>
                  <Tabs items={items} defaultActiveKey={itemsDefault}></Tabs>
                </div>
              </div>
            </Drawer>
          </>
        )
      }

      const SecurityLabel = memo(Security)

      return (
        <div className='product' ref={iframeRef}>
          <div className='product-header flex center'>
            <img src={address} alt='' style={{ width: '15px', height: '15px', marginRight: '6px' }} />
            <span className='overflow product-header__span'>{addressStr}</span>
          </div>
          <div className='product-content'>
            <div className='product-box flex column center' style={{ backgroundImage: `url(${child})` }}>
              <div className='product-box__box'>
                <img src={logo} alt='' className='product-box__img' />
              </div>
              <div className='product-box__span'>{productDetail?.product?.productName}</div>
              <span className='product-box__span'>{productDetail?.product?.description}</span>
            </div>
            <div className='product-birth flex between center'>
              <span className='product-birth__span'>出生日期</span>
              <button className='product-birth__btn'>{birthDay}</button>
            </div>
            {productDetail && (
              <SupportPlan
                notifyContent={productDetail?.config?.notifyContent}
                details={productDetail?.details?.details}
                coverageList={coverageList}
                feelCoverageList={feelCoverageList}
                careList={careList}
                supportDefault={supportDefault}
                age={age}
                insurancePeriod={insurancePeriod}
                detailDefault={detailDefault}
              />
            )}

            <div className='product-footer'>
              {productDetail && addressStr && birthDay && (
                <SecurityLabel
                  content={productDetail?.details?.content}
                  notification={productDetail?.details?.notification}
                  declareContent={productDetail?.config?.declareContent}
                  imgSrc={imgSrc}
                  detailPopup={detailPopup}
                  itemsDefault={itemsDefault}
                ></SecurityLabel>
              )}
              <div className='product-pay flex between center'>
                <div className=''>
                  <span className='product-pay__unit'>￥</span>
                  <span style={{ fontSize: '23px', width: '44px', fontWeight: '500', marginRight: '6px' }}>{money}</span>
                  <span style={{ fontSize: '12px', fontWeight: '500' }}>.00</span>
                </div>
                <button className='product-pay__btn'>立即投保</button>
              </div>
            </div>

            {showPicker ? (
              <Drawer
                placement='bottom'
                open={true}
                key='1'
                bodyStyle={{ padding: '0px' }}
                contentWrapperStyle={{ height: '44%', width: '375px', margin: 'auto' }}
                closable={false}
                getContainer={false}
              >
                <div className='picker-wrapper'>
                  <div className='picker'>
                    <div className='picker-header flex between center'>
                      <span style={{ color: '#828282' }}>取消</span>
                      <span style={{ color: '#fb8352!', fontSize: '16px' }}>宝宝的出生日期</span>
                      <button className='agent-header__btn'>确定</button>
                    </div>
                    <div class='picker-content flex'>
                      <div className='picker-content__item flex column center' style={{ flex: '1' }}>
                        <div className='scroll-mask'></div>
                        <div class='scroll-indicator'></div>
                        {yearList &&
                          yearList?.map((item, index) => (
                            <div
                              key={index}
                              className={`picker-content__item--label ${curYear == item ? 'picker-content__item--label__active' : ''}`}
                              id={index}
                            >
                              {item}
                            </div>
                          ))}
                      </div>
                      <div className='picker-content__item flex column center' style={{ flex: '1' }}>
                        <div className='scroll-mask'></div>
                        <div class='scroll-indicator'></div>
                        {monthList &&
                          monthList.map((item, index) => (
                            <div
                              key={index}
                              className={`picker-content__item--label ${curMonth == item ? 'picker-content__item--label__active' : ''}`}
                              id={index}
                            >
                              {item}
                            </div>
                          ))}
                      </div>
                      <div className='picker-content__item flex column center' style={{ flex: '1' }}>
                        <div className='scroll-mask'></div>
                        <div class='scroll-indicator'></div>
                        {dayList &&
                          dayList.map(({ label }, index) => (
                            <div
                              key={index}
                              className={`picker-content__item--label ${curDay == label ? 'picker-content__item--label__active' : ''}`}
                              id={`day-${label}`}
                            >
                              {label}
                            </div>
                          ))}
                      </div>
                    </div>
                  </div>
                </div>
              </Drawer>
            ) : (
              <></>
            )}
            <EnterPopup details={productDetail?.details} enterPopup={enterPopup} />
            <AgentPopup
              agentList={agentList}
              province={province}
              provinceStr={provinceStr}
              city={city}
              cityStr={cityStr}
              zone={zone}
              marketList={marketList}
              zoneList={zoneList}
              context={context}
              isSelect={isSelect}
              isMarket={isMarket}
            />
          </div>
        </div>
      )
    }
    ReactDOM.render(<App />, document.getElementById('root'))
  </script>
</html>
